<template>
  <div id="home" class="home_bg">
    <div class="content">
      <div class="content_text">
        <div style="display: flex">
          <div
            style="
              font-size: 47px;
              font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
              font-weight: 700;
              display: flex;
              flex-direction: column;
            "
          >
            <span>淘个够后台业务管理平台系统</span>
            <span
              style="
                font-size: 36px;
                font-family: '微软雅黑';
                font-weight: 400;
                top: 60px;
              "
              >Tao Business Management System</span
            >
          </div>
        </div>
        <div style="display: flex; margin-top: 14px">
          <el-input
            @keyup.enter.13.native="login"
            v-model="formItem.userCode"
            style="margin-right: 5px"
            placeholder="请输入用户名称"
            @focus="errorText = ''"
            clearable
          >
            <template slot="prefix">
              <div style="font-size: 35px; margin-left: 5px">
                <i size="20" class="el-icon-user-solid"></i>
              </div>
            </template>
          </el-input>
          <el-input
            @keyup.enter.13.native="loginFn"
            @focus="errorText = ''"
            clearable
            show-password
            style="margin-left: 5px"
            v-model="formItem.userPassword"
            placeholder="请输入登录密码"
          >
            <template slot="prefix">
              <div style="font-size: 35px; margin-left: 5px">
                <i size="20" class="el-icon-unlock"></i>
              </div>
            </template>
          </el-input>
          <div
            :class="error ? 'img_hover' : ''"
            style="position: absolute; right: -60px"
          >
            <img
              @click="loginFn"
              @mouseleave="mouseenter(false)"
              @mouseenter="mouseenter(true)"
              style="cursor: pointer"
              :src="url"
            />
          </div>
          <div
            class="adf"
            v-if="errorText !== ''"
            style="
              position: absolute;
              bottom: -40px;
              font-family: '微软雅黑';
              display: flex;
              text-indent: 5px;
              align-items: center;
            "
          >
            <img src="@/assets/error.png" />
            <span style="font-size: 16px; color: #ffa847">{{ errorText }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { login } from "_my/api/admin";
import { mapActions } from "vuex";
export default {
  name: "loginIndex",
  data() {
    return {
      errorText: "",
      error: false,
      formItem: {},
      url: require("../../assets/login.png"),
      fullscreenLoading: false,
    };
  },
  mounted() {},
  methods: {
    ...mapActions(["handleLogin"]),
    loginFn() {
      console.log(this.formItem);
      this.errorText =
        !this.formItem.userCode ?? ""
          ? "请填写用户账号"
          : !this.formItem.userPassword ?? ""
          ? "请填写登录密码"
          : "";
      if (this.errorText === "") {
        login(this.formItem).then((res) => {
          if (res.data.code === 200) {
            const jsData = JSON.parse(JSON.stringify(res.data.data.data));
            this.deepData(jsData);
            sessionStorage.setItem("menu", JSON.stringify(jsData));
            sessionStorage.setItem("token", res.data.data.token);
            sessionStorage.setItem(
              "userInfo",
              JSON.stringify(res.data.data.userInfo)
            );
            this.$store.commit("setUserInfo", res.data.data.userInfo);
            this.$router.push("home");
          } else if (res.data.code === 202) {
            this.errorFn();
            this.errorText = res.data.message;
          }
        });
      } else {
        this.errorFn();
      }
    },
    errorFn() {
      this.error = true;
      setTimeout(() => {
        this.error = false;
      }, 700);
    },
    mouseenter(status) {
      this.url = status
        ? require("../../assets/loginhover.png")
        : require("../../assets/login.png");
    },
    deepData(data) {
      data.forEach((item) => {
        item.path = "/" + item.menuPath;
        item.title = item.menuName;
        delete item.menuPath;
        delete item.menuName;
        delete item.menuId;
        delete item.menuIndex;
        delete item.menuPid;
        delete item.mid;
        if (item.children.length > 0) {
          this.deepData(item.children);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  /* background: url("../../assets/login_bg.jpg") no-repeat; */
  width: 100%;
  height: 100vh;
  background-size: cover;
  position: relative;
}
.login_form {
  width: 300px;
  height: 240px;
  position: absolute;
  top: calc(50% - 120px);
  left: calc(50% - 150px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  padding: 0 30px;
  border-radius: 10px;
}
.title {
  margin-bottom: 10px;
  color: rgb(170, 170, 172);
  font-size: 16px;
  height: 20px;
  line-height: 20px;
  font-weight: bold;
}
.home_bg {
  width: 100%;
  height: 100vh;
  background: url("../../assets/bj.png") no-repeat;
  background-size: cover;
}
.content {
  position: absolute;
  top: calc(50% - 150px);
  width: 100%;
  height: 300px;
  background-color: rgba(0, 0, 0, 0.5);
  .content_text {
    color: #fff;
    position: absolute;
    width: 623px;
    height: 180px;
    left: calc(50% - 312px);
    top: calc(50% - 95px);
    .img_1 {
      height: 100px;
      width: 95px;
      margin-top: 10px;
      position: relative;
      left: -10px;
    }
    .img_2 {
      width: 66px;
      height: 49px;
      position: absolute;
      top: 32px;
      left: 7px;
    }
    > span {
      font-size: 48px;
    }
  }
}

:deep(.el-input__inner) {
  height: 50px;
  line-height: 50px;
  text-indent: 20px;
}
:deep(.el-input__clear) {
  font-size: 20px;
  line-height: 50px;
}

.img_hover img {
  animation: myfirst 0.25s infinite;
}

@keyframes myfirst {
  0% {
    transform: translate(0px, 0px);
  }
  50% {
    transform: translate(0px, -9px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}
.adf {
  animation: fadeInOut 0.75s;
}
@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.25;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
:deep(.ivu-btn-primary) {
  background-color: red !important;
}

:deep(.el-input) {
  height: 50px;
  line-height: 50px;
}
</style>
